<template>
  <card style="margin: 10px 10px 40px">
    <div class="container">
      <h1>精选题库</h1>
      <!-- title提示 -->
      <Row type="flex" justify="space-between" style="margin-bottom: 10px">
        <Col>
          <p class="error-title">说明：目前支持学科和关键字条件筛选</p>
        </Col>
        <Col>
          <Button icon="md-brush" type="success" style="margin-left: 5px">新增试题</Button>
        </Col>
      </Row>
      <!-- 表单模块 -->
      <Form :label-width="80" ref="formNode">
        <!-- 第一行 -->
        <Row>
          <Col span="6">
            <Form-item label="学科">
              <Select placeholder="请选择" v-model="formData.subjectID" @on-change="chengeSelect">
                <Option :value="item.value" v-for="item in simpleList" :key="item.id">{{ item.label }} </Option>
              </Select>
            </Form-item>
          </Col>
          <Col span="6">
            <Form-item label="二级目录">
              <Select placeholder="请选择" v-model="formData.catalogID">
                <Option :value="item.value" v-for="item in twoSimple" :key="item.id">{{ item.label }}</Option>
              </Select>
            </Form-item>
          </Col>
          <Col span="6">
            <Form-item label="标签">
              <Select placeholder="请选择">
                <Option :value="item.value" v-for="item in tagSimple" :key="item.id">{{ item.label }}</Option>
              </Select>
            </Form-item>
          </Col>
          <Col span="6">
            <Form-item label="关键字">
              <Input placeholder="根据题干搜索" v-model="formData.keyword"></Input>
            </Form-item>
          </Col>
        </Row>
        <!-- 第二行 -->
        <Row>
          <Col span="6">
            <Form-item label="试题类型">
              <Select placeholder="请选择" v-model="formData.questionType">
                <Option :value="item.value" v-for="item in questionType" :key="item.value">{{ item.label }}</Option>
              </Select>
            </Form-item>
          </Col>
          <Col span="6">
            <Form-item label="难度">
              <Select placeholder="请选择" v-model="formData.difficulty">
                <Option :value="item.value" v-for="item in difficulty" :key="item.value">{{ item.label }}</Option>
              </Select>
            </Form-item>
          </Col>
          <Col span="6">
            <Form-item label="方向">
              <Select placeholder="请选择" v-model="formData.direction">
                <Option :value="item" v-for="item in direction" :key="item">{{ item }}</Option>
              </Select>
            </Form-item>
          </Col>
          <Col span="6">
            <Form-item label="录入人">
              <Select placeholder="请选择" v-model="formData.creatorID">
                <Option :value="item.id" v-for="item in Users" :key="item.id"> {{ item.username }}</Option>
              </Select>
            </Form-item>
          </Col>
        </Row>
        <!-- 第三行 -->
        <Row>
          <Col span="6">
            <Form-item label="题目备注">
              <Input v-model="formData.remarks"></Input>
            </Form-item>
          </Col>
          <Col span="6">
            <Form-item label="企业简称">
              <Input v-model="formData.shortName"></Input>
            </Form-item>
          </Col>
          <Col span="6">
            <Form-item label="城市">
              <Select style="width: 100px; margin-right: 10px" @on-change="changeCitys" v-model="formData.province">
                <Option v-for="item in provincesList" :value="item" :key="item">{{ item }}</Option>
              </Select>
              <Select style="width: 100px" v-model="formData.city">
                <Option v-for="item in citysList" :value="item" :key="item">{{ item }}</Option>
              </Select>
            </Form-item>
          </Col>
          <Col span="6">
            <Row type="flex" justify="end">
              <Button style="margin-right: 10px" @click="resetForm">清除</Button>
              <Button type="primary" @click="serchList">搜索</Button>
            </Row>
          </Col>
        </Row>
      </Form>
      <el-alert :title="title" type="info" show-icon> </el-alert>
      <el-tabs v-model="type" type="card" @tab-click="handleClick">
        <el-tab-pane label="全部" name="all"></el-tab-pane>
        <el-tab-pane label="待审核" name="checkData"></el-tab-pane>
        <el-tab-pane label="已审核" name="checkOk"></el-tab-pane>
        <el-tab-pane label="已拒绝" name="checkNo"></el-tab-pane>
      </el-tabs>
      <!-- 表格数据 -->
      <Table :columns="columns" :data="simpleData" style="margin: 10px 0">
        <template slot-scope="{ row }" slot="action">
          <Row type="flex" :wrap="false" align="middle" justify="space-around">
            <Button type="text" size="small" @click="showDalogBtn(row)" class="fonSize bac">预览</Button>
            <Button type="text" class="fonSize" :class="{ bac: row.chkState !== '通过' && row.chkState !== '拒绝' }" @click="check(row)" :disabled="row.chkState === '通过' || row.chkState === '拒绝'"
              >审核</Button
            >
            <Button type="text" class="fonSize" @click="update(row)" :class="{ bac: row.publishState == '已发布' }" :disabled="row.publishState !== '已发布'">修改</Button>
            <Button type="text" class="fonSize bac" @click="topBtn(row)" v-if="row.publishState === '已发布'">上架</Button>
            <Button type="text" class="fonSize bac" @click="dowBtn(row)" v-else>下架</Button>
            <Button type="text" class="fonSize" :class="{ bac: row.publishState == '已发布' }" @click="delBtn(row)" :disabled="row.publishState !== '已发布'">删除</Button>
          </Row>
        </template>
      </Table>
      <Row type="flex" justify="end">
        <Page :total="page.total" show-elevator show-sizer @on-change="changePage" @on-page-size-change="changeSize" :page-size="page.pagesize" />
      </Row>
    </div>
    <!-- 审核 -->
    <Modal v-model="modal" title="题目审核" @on-ok="checkModal">
      <RadioGroup v-model="chkStateObj.chkState">
        <Radio label="1">
          <span>通过</span>
        </Radio>
        <Radio label="2">
          <span>拒绝</span>
        </Radio>
      </RadioGroup>
      <Input v-model="chkStateObj.chkRemarks" type="textarea" :autosize="{ minRows: 2, maxRows: 5 }"></Input>
    </Modal>
    <questionsPreview :showDalog.sync="showDalog" ref="showSimple"></questionsPreview>
  </card>
</template>

<script>
import { simple } from '@/api/hmmm/subjects.js' // 学科简单列表
import { simple as Users } from '@/api/base/users.js'
import { simple as twoSimple } from '@/api/hmmm/directorys.js' // 目录简单列表
import { simple as tagSimple } from '@/api/hmmm/tags.js' // 标签简单列表
import { difficulty, questionType, direction } from '@/api/hmmm/constants.js' // 假数据
import { provinces, citys } from '@/api/hmmm/citys.js' // 城市数据
import { choice, remove, choicePublish, choiceCheck } from '@/api/hmmm/questions.js' // 基础题库列表 , 删除,上下架, 审核
import moment from 'moment'
import questionsPreview from '../components/questions-preview'
const mapList = function (arr) {
  return arr.map((item) => {
    // 题目类型
    if (item.questionType === '1') {
      item.questionType = '单选'
    } else if (item.questionType === '2') {
      item.questionType = '多选'
    } else {
      item.questionType = '简答'
    }
    // 时间过滤器
    item.addDate = moment(item.addDate).format('YYYY-MM-DD  hh:mm:ss')
    // 难度
    // console.log(item.difficulty)
    if (item.difficulty === '1') {
      item.difficulty = '简单'
    } else if (item.difficulty === '2') {
      item.difficulty = '一般'
    } else {
      item.difficulty = '困难'
    }
    // 题干
    item.question = item.question.replace(/<[^<>]+>/g, '')
    // 审核状态
    if (item.chkState === 0) {
      item.chkState = '待审核'
    } else if (item.chkState === 1) {
      item.chkState = '通过'
    } else {
      item.chkState = '拒绝'
    }
    // 发布状态
    if (item.publishState === 0) {
      item.publishState = '已发布'
    } else if (item.publishState === 1) {
      item.publishState = '待发布 '
    } else {
      item.publishState = '已上架'
    }
    return item
  })
}
export default {
  components: {
    questionsPreview
  },
  data () {
    return {
      formData: {
        difficulty: '', // 难度
        city: '', // 县，区
        province: '', // 市
        creatorID: '', // 录入人
        subjectID: '', // 学科id
        catalogID: '', // 二级目录
        shortName: '', // 企业简称
        direction: '', // 方向
        remarks: '', // 题目备注
        keyword: '' // 搜索关键字
      },
      chkStateObj: {
        // 审核对象
        id: '403', // 审核的id
        chkRemarks: '', // 审核意见
        chkState: '' // 审核状态
      },
      page: {
        page: 1, // 当前页码
        pagesize: 5, // 每页条数
        total: 0 // 数据条数
      },
      type: 'all', // 当前的 tab页
      showDalog: false, // 控制题目预览面板
      title: '0', // 数据长度
      provincesList: [], // 所有城市
      citysList: [], // 区县列表
      difficulty, // 难度
      questionType, // 题型
      direction, // 方向
      twoSimple: [], // 二级目录
      tagSimple: [], // 标签
      simpleList: [], // 学科简单列表
      Users: [], // 录入人
      simpleData: [], // 表格数据
      //  表格title
      columns: [
        {
          title: '试题编号',
          width: 150,
          key: 'number'
        },
        {
          title: '学科',
          align: 'center',
          width: 100,
          key: 'subject'
        },
        {
          title: '目录',
          align: 'center',
          width: 100,
          key: 'catalog'
        },
        {
          title: '题型',
          align: 'center',
          width: 100,
          key: 'questionType'
        },
        {
          title: '题干',
          align: 'center',
          width: 250,
          key: 'question'
        },
        {
          title: '录入时间',
          align: 'center',
          width: 200,
          key: 'addDate'
        },
        {
          title: '难度',
          align: 'center',
          width: 200,
          key: 'difficulty'
        },
        {
          title: '录入人',
          width: 200,
          key: 'creator'
        },
        {
          title: '审核状态',
          align: 'center',
          width: 200,
          key: 'chkState'
        },
        {
          title: '审核意见',
          align: 'center',
          width: 200,
          key: 'chkRemarks'
        },
        {
          title: '审核人',
          align: 'center',
          width: 200,
          key: 'chkUser'
        },
        {
          title: '发布状态',
          align: 'center',
          width: 200,
          key: 'publishState'
        },
        {
          title: '操作',
          fixed: 'right',
          width: 250,
          slot: 'action',
          align: 'center'
        }
      ],
      modal: false // 审核显示
    }
  },
  methods: {
    async getSimple () {
      // 获取学科简单列表
      const res = await simple()
      this.simpleList = res.data
    },
    async getUsers () {
      // 获取录入人数据
      const { data } = await Users()
      this.Users = data
    },
    async chengeSelect (value) {
      // 二级目录
      const { data } = await twoSimple({ subjectID: value })
      const res = await tagSimple({ subjectID: value })
      this.twoSimple = data // 二级目录
      this.tagSimple = res.data // 标签
    },
    async changeCitys (value) {
      // 选择区县
      this.citysList = await citys(value)
    },
    async getTabelLis () {
      // 获取表格数据
      const { data } = await choice(this.page) // 获取表格数据
      this.title = `数据一共${data.counts}条`
      this.page.total = data.counts
      this.simpleData = mapList(data.items)
    },
    async serchList () {
      // 搜索按钮
      const obj = {}
      Object.keys(this.formData).forEach((item) => {
        if (this.formData[item]) {
          obj[item] = this.formData[item]
        }
      })
      const { data } = await choice({ ...obj, page: 1, pagesize: 5 })
      this.title = `数据一共${data.counts}条`
      this.page.total = data.counts
      this.simpleData = mapList(data.items)
    },

    // 待审核 tabs 页
    async handleClick (tab) {
      const obj = {}
      if (tab.name === 'checkData') {
        // tabs 页 待审核
        obj.chkState = '0'
        const { data } = await choice({ ...this.page, ...obj }) // 获取表格数据
        this.title = `数据一共${data.counts}条`
        this.page.total = data.counts
        this.simpleData = mapList(data.items)
      } else if (tab.name === 'checkOk') {
        // tabs 页 已通过
        obj.chkState = '1'
        const { data } = await choice({ ...this.page, ...obj }) // 获取表格数据
        this.title = `数据一共${data.counts}条`
        this.page.total = data.counts
        this.simpleData = mapList(data.items)
      } else if (tab.name === 'checkNo') {
        // tabs 页 已拒绝
        obj.chkState = '2'
        const { data } = await choice({ ...this.page, ...obj }) // 获取表格数据
        this.title = `数据一共${data.counts}条`
        this.page.total = data.counts
        this.simpleData = mapList(data.items)
      } else {
        const { data } = await choice({ ...this.page }) // 获取表格数据
        this.title = `数据一共${data.counts}条`
        this.page.total = data.counts
        this.simpleData = mapList(data.items)
      }
    },
    // 上架按钮
    async topBtn (obj) {
      await this.$confirm('是否上架？', '确认信息', {
        distinguishCancelAndClose: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      })
      obj.publishState = 1
      await choicePublish(obj)
      await this.getTabelLis()
    },
    // 下架按钮
    async dowBtn (obj) {
      await this.$confirm('是否下架？', '确认信息', {
        distinguishCancelAndClose: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      })
      obj.publishState = 0
      await choicePublish(obj)
      await this.getTabelLis()
    },
    // 审核按钮
    check (obj) {
      this.chkStateObj.id = obj.id
      this.modal = true
    },
    // 审核确定
    async checkModal () {
      this.chkStateObj.chkState = this.chkStateObj.chkState * 1
      await choiceCheck(this.chkStateObj)
      this.$message.success('修改成功')
      this.chkStateObj = { // 审核对象
        id: '403', // 审核的id
        chkRemarks: '', // 审核意见
        chkState: '' // 审核状态
      }
    },
    // 修改
    update (obj) {
      this.$router.push({
        name: 'questions-new',
        query: {
          id: obj.id
        }
      })
    },
    //  删除按钮
    async delBtn (obj) {
      await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      await remove(obj)
      await this.getTabelLis()
      this.$message.success('删除成功')
    },
    // 预览按钮 题目预览面板
    showDalogBtn (obj) {
      this.$refs.showSimple.updateObj(obj)
      this.showDalog = true
    },
    // 分页器
    async changePage (page) {
      // 切换页码
      this.page.page = page
      await this.getTabelLis()
    },
    changeSize (page) {
      // 切换每一页的要展示的条数
      this.page.pagesize = page
    },
    //  重置表单
    resetForm () {
      this.formData = {
        difficulty: '', // 难度
        city: '', // 县，区
        province: '', // 市
        creatorID: '', // 录入人
        subjectID: '', // 学科id
        catalogID: '', // 二级目录
        shortName: '', // 企业简称
        direction: '', // 方向
        remarks: '', // 题目备注
        keyword: '' // 搜索关键字
      }
    }
  },
  async created () {
    await this.getSimple() // 获取学科简单列表
    await this.getUsers() // 获取录入人
    await this.getTabelLis() // 获取表格数据
    this.provincesList = await provinces()
  }
}
</script>

<style scoped >
.error-title {
  font-size: 12px;
  color: rgba(250, 51, 51, 0.433);
}
.fonSize {
  font-size: 12px;
  padding: 4px;
}
.bac {
  color: #409eff;
}
</style>
